const db = wx.cloud.database(); // 初始化云数据库实例
const _ = db.command; // 获取数据库操作符，用于高级查询

Page({
  data: {
    userInfo: null,      // 当前用户信息
    classList: [],       // 辅导员管理的班级名称列表
    currentClassName: null,// 当前选中的班级名称
    studentList: [],     // 当前选中班级的学生列表
    filteredStudentList: [], // 搜索过滤后的学生列表
    searchValue: '',      // 搜索关键词
    isLoading: true,     // 是否正在加载数据
    testStatsData: {     // 测评统计数据
      studentScores: [],  // 学生SDS和SAS平均分
      sasLevelDistribution: {}, // SAS焦虑等级分布
      sdsLevelDistribution: {}  // SDS抑郁等级分布
    },
    canvasWidth: 0,      // 画布宽度
    canvasHeight: 0,     // 画布高度
  },

  onLoad() {
    this.loadUserInfoAndClasses(); // 页面加载时获取用户信息和班级列表
    // 获取系统信息设置画布尺寸
    const systemInfo = wx.getSystemInfoSync(); // 获取设备信息用于适配不同尺寸屏幕
    const canvasWidth = systemInfo.windowWidth - 40; // 左右各留20px的边距
    this.setData({
      canvasWidth,
      canvasHeight: 220 // 设置固定高度
    });
  },

  onReady() {
    // 页面渲染完成后初始化画布
    if (this.data.currentClassName) {
      this.loadStudentTestData(this.data.currentClassName); // 加载当前班级学生的测试数据
    }
  },

  // 加载用户信息和管理的班级名称
  async loadUserInfoAndClasses() {
    console.log("--- 开始加载用户信息和班级名称 ---");
    this.setData({ isLoading: true, classList: [], currentClassName: null, studentList: [], filteredStudentList: [] }); // 重置状态
    const userInfo = wx.getStorageSync('userInfo'); // 从本地存储获取用户信息
    console.log("从本地存储获取的用户信息:", userInfo);
    
    // 检查用户信息是否存在
    if (!userInfo) {
      console.warn("未找到本地用户信息");
      wx.showToast({ title: '用户未登录', icon: 'none' });
      this.setData({ isLoading: false });
      return;
    }
    // 检查用户角色是否为教师
    if (userInfo.role !== 'teacher') {
      console.warn("用户角色非教师:", userInfo.role);
      wx.showToast({ title: '非辅导员账号', icon: 'none' });
      this.setData({ isLoading: false });
      return;
    }
    this.setData({ userInfo });
    console.log("当前教师用户信息已设置:", this.data.userInfo);

    // 直接使用 userInfo.classes (班级名称数组)
    if (userInfo.classes && Array.isArray(userInfo.classes) && userInfo.classes.length > 0) {
        const validClassNames = userInfo.classes.filter(name => typeof name === 'string' && name); // 过滤无效名称
        console.log("获取到管理的班级名称列表:", validClassNames);
        
        // 如果有有效的班级名称，设置第一个为当前选中的班级
        if (validClassNames.length > 0) {
            this.setData({
              classList: validClassNames,
              currentClassName: validClassNames[0] // 默认选中第一个班级名称
            });
            console.log("设置当前选中班级名称:", this.data.currentClassName);
            await this.loadStudentList(this.data.currentClassName); // 加载班级学生列表
        } else {
             console.warn("userInfo.classes 中没有有效的班级名称");
             this.setData({ isLoading: false });
        }
    } else {
      console.warn("userInfo 中无有效的 classes 数组");
      this.setData({ isLoading: false }); // 没有班级，结束加载
    }
     console.log("--- 结束加载用户信息和班级名称 ---");
  },

  // 根据班级名称加载学生列表
  async loadStudentList(className) {
    if (!className) {
         console.warn("loadStudentList 调用缺少 className 参数");
         this.setData({ isLoading: false, studentList: [], filteredStudentList: [] });
         return;
    }
    console.log(`开始加载班级 "${className}" 的学生列表`);
    this.setData({ isLoading: true, studentList: [], filteredStudentList: [] }); // 重置学生列表
    
    // 从数据库查询班级中的学生信息
    try {
      const studentRes = await db.collection('users').where({
        role: 'student',
        classes: _.all([className]) // 查找 classes 数组包含该班级名称的学生
      }).field({
        _id: true,
        username: true,
        studentId: true,
        phone: true,
        dormitory: true,
        avatarUrl: true
      }).get();
      
      console.log(`班级 "${className}" 学生查询结果:`, studentRes.data);
      this.setData({
        studentList: studentRes.data,
        filteredStudentList: studentRes.data, // 初始显示全部
        searchValue: '' // 清空搜索词
      });
      
      // 加载学生的心理测评数据
      this.loadStudentTestData(className);
    } catch (err) {
      console.error(`获取班级 "${className}" 学生列表失败`, err);
      wx.showToast({ title: '加载学生失败', icon: 'none' });
    } finally {
      this.setData({ isLoading: false });
    }
  },

  // 切换班级
  onClassSelect(e) {
    const className = e.currentTarget.dataset.name; // 从 data-name 获取班级名称
     if (!className) {
        console.warn("onClassSelect 未能获取到 data-name");
        return;
    }
    // 判断是否与当前选中班级不同，避免重复加载
    if (className !== this.data.currentClassName) {
        console.log("切换到班级:", className);
        this.setData({ 
            currentClassName: className,
            // 重置数据以避免显示上一个班级的图表
            testStatsData: {
                studentScores: [],
                sasLevelDistribution: {},
                sdsLevelDistribution: {}
            }
        });
        // 加载新班级学生列表和相关数据
        this.loadStudentList(className);
    }
  },

  // 处理搜索输入
  onSearchInput(e) {
    const searchValue = e.detail.value.trim().toLowerCase(); // 获取并处理搜索输入值
    this.setData({ searchValue });
    this.filterStudentList(); // 根据搜索词过滤学生列表
  },

  // 过滤学生列表
  filterStudentList() {
    const { studentList, searchValue } = this.data;
    if (!searchValue) {
      this.setData({ filteredStudentList: studentList }); // 如果搜索词为空，显示全部学生
      return;
    }

    // 根据学生姓名或学号进行过滤
    const filteredList = studentList.filter(student => {
      return (student.name && student.name.toLowerCase().includes(searchValue)) ||
             (student.studentId && String(student.studentId).toLowerCase().includes(searchValue)); // studentId 可能不是字符串，先转换
    });
    this.setData({ filteredStudentList: filteredList });
  },

  // 跳转到学生详情
  navigateToStudentDetail(e) {
    const studentId = e.currentTarget.dataset.id; // 获取学生ID
    // 获取学生姓名用于更友好的提示
    // const studentName = this.data.studentList.find(s => s._id === studentId)?.name || `ID: ${studentId.substring(0,6)}...`; 
    // wx.showToast({ title: `查看学生 ${studentName} 详情（待实现）`, icon: 'none' });
    wx.navigateTo({ url: `/pages/teacher/student-detail/index?id=${studentId}` }); // 跳转到学生详情页面
  },

  // 加载学生心理测评数据
  async loadStudentTestData(className) {
    if (!className) return;
    
    try {
      // 先获取班级学生ID列表
      const studentIds = this.data.studentList.map(student => student._id);
      if (studentIds.length === 0) return;

      console.log('学生ID列表:', studentIds);

      // 查询所有学生的心理测评数据
      let sasTestsRes;
      let sdsTestsRes;
      
      try {
        // 尝试使用userId字段查询SAS焦虑测评数据
        sasTestsRes = await db.collection('psychological_tests')
          .where({
            userId: _.in(studentIds),
            testType: 'SAS'
          }).get();
        
        // 查询SDS抑郁测评数据
        sdsTestsRes = await db.collection('psychological_tests')
          .where({
            userId: _.in(studentIds),
            testType: 'SDS'
          }).get();
        
        console.log('使用userId查询获取SAS测评数据:', sasTestsRes.data);
        console.log('使用userId查询获取SDS测评数据:', sdsTestsRes.data);
        
        // 如果没有获取到数据，尝试使用type字段而非testType字段
        if (sasTestsRes.data.length === 0) {
          sasTestsRes = await db.collection('psychological_tests')
            .where({
              userId: _.in(studentIds),
              type: 'SAS'
            }).get();
          console.log('使用type字段查询获取SAS测评数据:', sasTestsRes.data);
        }
        
        if (sdsTestsRes.data.length === 0) {
          sdsTestsRes = await db.collection('psychological_tests')
            .where({
              userId: _.in(studentIds),
              type: 'SDS'
            }).get();
          console.log('使用type字段查询获取SDS测评数据:', sdsTestsRes.data);
        }
      } catch (err) {
        console.error('尝试使用userId字段查询失败:', err);
        // 如果上述查询失败，则为空数组
        sasTestsRes = { data: [] };
        sdsTestsRes = { data: [] };
      }
      
      // 如果仍然没有数据，则尝试直接获取所有测评数据
      if (sasTestsRes.data.length === 0 && sdsTestsRes.data.length === 0) {
        try {
          // 直接获取最近的测试记录进行调试
          const allTestsRes = await db.collection('psychological_tests')
            .limit(10)
            .get();
          
          console.log('获取所有测评记录(调试用):', allTestsRes.data);
          
          // 查看记录结构，了解正确的字段名
          if (allTestsRes.data.length > 0) {
            const sampleRecord = allTestsRes.data[0];
            console.log('测评记录样例结构:', Object.keys(sampleRecord));
            
            // 根据样例记录确定正确的字段名
            const correctUserIdField = sampleRecord.hasOwnProperty('userId') ? 'userId' : 
                                     sampleRecord.hasOwnProperty('openid') ? 'openid' : 'userId';
            
            const correctTypeField = sampleRecord.hasOwnProperty('testType') ? 'testType' : 
                                   sampleRecord.hasOwnProperty('type') ? 'type' : 'testType';
            
            console.log(`正确的用户ID字段名: ${correctUserIdField}, 正确的测试类型字段名: ${correctTypeField}`);
            
            // 使用正确的字段名重新查询
            const whereConditionSAS = {};
            whereConditionSAS[correctTypeField] = 'SAS';
            
            const whereConditionSDS = {};
            whereConditionSDS[correctTypeField] = 'SDS';
            
            // 使用正确字段名重新查询SAS和SDS测评数据
            sasTestsRes = await db.collection('psychological_tests')
              .where(whereConditionSAS)
              .limit(20)
              .get();
            
            sdsTestsRes = await db.collection('psychological_tests')
              .where(whereConditionSDS)
              .limit(20)
              .get();
            
            console.log('使用正确字段名重新查询SAS测评数据:', sasTestsRes.data);
            console.log('使用正确字段名重新查询SDS测评数据:', sdsTestsRes.data);
          }
        } catch (err) {
          console.error('获取所有测评记录失败:', err);
        }
      }

      // 计算每个学生的SAS和SDS平均分
      const studentScores = {};
      // 定义焦虑等级计数对象
      const sasLevelCount = {
        '正常': 0,
        '轻度焦虑': 0,
        '中度焦虑': 0,
        '重度焦虑': 0
      };
      // 定义抑郁等级计数对象
      const sdsLevelCount = {
        '正常': 0,
        '轻度抑郁': 0,
        '中度抑郁': 0,
        '重度抑郁': 0
      };

      // 处理SAS数据，统计焦虑等级分布
      sasTestsRes.data.forEach(test => {
        // 获取用户ID (可能是userId或openid)
        const userIdValue = test.userId || test.openid || '';
        if (!userIdValue) return;
        
        // 初始化用户记录（如果不存在）
        if (!studentScores[userIdValue]) {
          studentScores[userIdValue] = { 
            sasTotal: 0, 
            sasCount: 0, 
            sdsTotal: 0, 
            sdsCount: 0, 
            username: test.username || test.name || '未知学生' 
          };
        }
        
        // 获取分数 (可能是score或totalScore)
        const scoreValue = typeof test.score !== 'undefined' ? test.score : 
                         (typeof test.totalScore !== 'undefined' ? test.totalScore : 0);
        
        // 累计SAS分数和计数
        studentScores[userIdValue].sasTotal += scoreValue;
        studentScores[userIdValue].sasCount += 1;
        
        // 统计焦虑等级分布
        if (test.level) {
          sasLevelCount[test.level] = (sasLevelCount[test.level] || 0) + 1;
        }
      });

      // 处理SDS数据，统计抑郁等级分布
      sdsTestsRes.data.forEach(test => {
        // 获取用户ID (可能是userId或openid)
        const userIdValue = test.userId || test.openid || '';
        if (!userIdValue) return;
        
        // 初始化用户记录（如果不存在）
        if (!studentScores[userIdValue]) {
          studentScores[userIdValue] = { 
            sasTotal: 0, 
            sasCount: 0, 
            sdsTotal: 0, 
            sdsCount: 0, 
            username: test.username || test.name || '未知学生' 
          };
        }
        
        // 获取分数 (可能是score或totalScore)
        const scoreValue = typeof test.score !== 'undefined' ? test.score : 
                         (typeof test.totalScore !== 'undefined' ? test.totalScore : 0);
        
        // 累计SDS分数和计数
        studentScores[userIdValue].sdsTotal += scoreValue;
        studentScores[userIdValue].sdsCount += 1;
        
        // 统计抑郁等级分布
        if (test.level) {
          sdsLevelCount[test.level] = (sdsLevelCount[test.level] || 0) + 1;
        }
      });

      // 转换为数组格式，计算平均分
      const scoresArray = Object.keys(studentScores).map(userId => {
        const data = studentScores[userId];
        // 计算SAS和SDS平均分
        const sasAvg = data.sasCount > 0 ? (data.sasTotal / data.sasCount).toFixed(1) : 0;
        const sdsAvg = data.sdsCount > 0 ? (data.sdsTotal / data.sdsCount).toFixed(1) : 0;
        return {
          userId: userId,
          username: data.username,
          sasAvg: parseFloat(sasAvg),
          sdsAvg: parseFloat(sdsAvg)
        };
      }).filter(item => item.sasAvg > 0 || item.sdsAvg > 0); // 过滤掉没有测评记录的学生

      // 更新统计数据
      this.setData({
        'testStatsData.studentScores': scoresArray,
        'testStatsData.sasLevelDistribution': sasLevelCount,
        'testStatsData.sdsLevelDistribution': sdsLevelCount
      }, () => {
        // 在数据设置完成后，调用drawCharts方法重新绘制图表
        console.log(`班级 "${className}" 测评数据已更新，准备重绘图表`);
        this.drawCharts();
      });
      
      console.log(`班级 "${className}" 测评统计数据:`, {
        studentScores: scoresArray,
        sasLevelDistribution: sasLevelCount,
        sdsLevelDistribution: sdsLevelCount
      });
      
    } catch (err) {
      console.error('加载学生测评数据出错:', err);
    }
  },

  // 绘制所有图表
  drawCharts() {
    // 延迟一点，确保canvas已准备好
    setTimeout(() => {
      this.drawScoreBarChart(); // 绘制分数柱状图
      this.drawSasPieChart(); // 绘制SAS饼图
      this.drawSdsPieChart(); // 绘制SDS饼图
    }, 300);
  },

  // 绘制学生平均分柱状图
  drawScoreBarChart() {
    const { studentScores } = this.data.testStatsData;
    if (!studentScores || studentScores.length === 0) return;

    // 创建画布上下文
    const ctx = wx.createCanvasContext('scoreBarChart');
    const width = this.data.canvasWidth;
    const height = this.data.canvasHeight;
    
    // 清空画布
    ctx.clearRect(0, 0, width, height);
    
    // 设置图表边距
    const padding = { top: 30, right: 20, bottom: 60, left: 40 };
    const chartWidth = width - padding.left - padding.right;
    const chartHeight = height - padding.top - padding.bottom;
    
    // 计算柱状图参数和显示学生数量
    const barCount = studentScores.length;
    const maxBars = 10; // 最多显示10个学生数据
    const displayedScores = barCount > maxBars ? studentScores.slice(0, maxBars) : studentScores;
    const displayedCount = displayedScores.length;
    
    // 计算柱子宽度和间距
    const barWidth = Math.min(30, (chartWidth / displayedCount / 2) * 0.8); // 每个学生有2个柱子(SAS和SDS)
    const barSpacing = 2; // 同一学生的两个柱子间距
    const groupSpacing = 15; // 不同学生之间的组间距
    const groupWidth = barWidth * 2 + barSpacing; // 每组宽度(SAS+SDS)
    
    // 找出最大分数作为Y轴最大值
    let maxScore = 0;
    displayedScores.forEach(item => {
      maxScore = Math.max(maxScore, item.sasAvg || 0, item.sdsAvg || 0);
    });
    maxScore = Math.ceil(maxScore / 10) * 10; // 向上取整到10的倍数
    maxScore = Math.max(maxScore, 50); // 最小值设为50，避免图表太矮
    
    // 绘制Y轴
    ctx.beginPath();
    ctx.moveTo(padding.left, padding.top);
    ctx.lineTo(padding.left, height - padding.bottom);
    ctx.stroke();
    
    // 绘制Y轴刻度和网格线
    const yStep = maxScore / 5; // 分5个刻度
    for (let i = 0; i <= 5; i++) {
      const y = padding.top + chartHeight - (i * chartHeight / 5);
      const score = i * yStep;
      
      // 绘制刻度文本
      ctx.setFontSize(10);
      ctx.setTextAlign('right');
      ctx.fillText(score.toString(), padding.left - 5, y + 3);
      
      // 绘制网格线
      ctx.beginPath();
      ctx.setLineDash([2, 2]); // 虚线
      ctx.moveTo(padding.left, y);
      ctx.lineTo(width - padding.right, y);
      ctx.setStrokeStyle('#EEEEEE');
      ctx.stroke();
      ctx.setLineDash([]); // 恢复实线
    }
    
    // 绘制X轴
    ctx.beginPath();
    ctx.setStrokeStyle('#000000');
    ctx.moveTo(padding.left, height - padding.bottom);
    ctx.lineTo(width - padding.right, height - padding.bottom);
    ctx.stroke();
    
    // 绘制柱状图和X轴标签
    displayedScores.forEach((item, index) => {
      const x = padding.left + index * (groupWidth + groupSpacing);
      
      // 绘制SAS柱状图
      if (item.sasAvg) {
        const barHeight = (item.sasAvg / maxScore) * chartHeight;
        ctx.setFillStyle('#5B8FF9'); // SAS蓝色
        ctx.fillRect(
          x, 
          height - padding.bottom - barHeight, 
          barWidth, 
          barHeight
        );
      }
      
      // 绘制SDS柱状图
      if (item.sdsAvg) {
        const barHeight = (item.sdsAvg / maxScore) * chartHeight;
        ctx.setFillStyle('#5AD8A6'); // SDS绿色
        ctx.fillRect(
          x + barWidth + barSpacing, 
          height - padding.bottom - barHeight, 
          barWidth, 
          barHeight
        );
      }
      
      // 绘制X轴标签（学生名称）
      ctx.setFontSize(10);
      ctx.setTextAlign('center');
      ctx.setTextBaseline('top');
      const label = item.username || '未知';
      const shortLabel = label.length > 4 ? label.substring(0, 4) + '..' : label;
      ctx.fillText(
        shortLabel, 
        x + barWidth + barSpacing/2, 
        height - padding.bottom + 5
      );
    });
    
    // 绘制图表标题
    ctx.setFontSize(14);
    ctx.setTextAlign('center');
    ctx.setTextBaseline('top');
    ctx.fillText('SMS分数（56.9/100）', width / 2, 10);
    
    // 修改图例位置，移到图表底部
    const legendY = height - 20; // 将图例移到底部
    const legendItemWidth = 80;
    
    // SAS图例
    const legendX1 = width / 2 - legendItemWidth;
    ctx.setFillStyle('#5B8FF9');
    ctx.fillRect(legendX1, legendY, 15, 10);
    ctx.setFontSize(10);
    ctx.setTextAlign('left');
    ctx.setFillStyle('#000000');
    ctx.fillText('SAS焦虑', legendX1 + 20, legendY + 8);
    
    // SDS图例
    const legendX2 = width / 2 + 10;
    ctx.setFillStyle('#5AD8A6');
    ctx.fillRect(legendX2, legendY, 15, 10);
    ctx.setFontSize(10);
    ctx.setTextAlign('left');
    ctx.setFillStyle('#000000');
    ctx.fillText('SDS抑郁', legendX2 + 20, legendY + 8);
    
    ctx.draw(); // 执行绘制
  },

  // 绘制SAS焦虑等级饼图
  drawSasPieChart() {
    const { sasLevelDistribution } = this.data.testStatsData;
    // 调用通用饼图绘制函数绘制SAS饼图
    this.drawPieChart('sasPieChart', sasLevelDistribution, 'SAS焦虑等级分布', [
      { name: '正常', color: '#5AD8A6' },
      { name: '轻度焦虑', color: '#FADB14' },
      { name: '中度焦虑', color: '#F7A752' },
      { name: '重度焦虑', color: '#F36152' }
    ]);
  },

  // 绘制SDS抑郁等级饼图
  drawSdsPieChart() {
    const { sdsLevelDistribution } = this.data.testStatsData;
    // 调用通用饼图绘制函数绘制SDS饼图
    this.drawPieChart('sdsPieChart', sdsLevelDistribution, 'SDS抑郁等级分布', [
      { name: '正常', color: '#5AD8A6' },
      { name: '轻度抑郁', color: '#FADB14' },
      { name: '中度抑郁', color: '#F7A752' },
      { name: '重度抑郁', color: '#F36152' }
    ]);
  },

  // 通用饼图绘制函数
  drawPieChart(canvasId, data, title, colorConfig) {
    if (!data) return;

    // 创建画布上下文
    const ctx = wx.createCanvasContext(canvasId);
    const width = this.data.canvasWidth;
    const height = this.data.canvasHeight;
    
    // 清空画布
    ctx.clearRect(0, 0, width, height);
    
    // 计算总数
    let total = 0;
    Object.values(data).forEach(value => {
      total += value;
    });
    
    // 如果没有数据，显示无数据提示
    if (total === 0) {
      ctx.setFontSize(14);
      ctx.setTextAlign('center');
      ctx.setTextBaseline('middle');
      ctx.fillText('暂无数据', width / 2, height / 2);
      ctx.draw();
      return;
    }
    
    // 设置饼图参数 - 修改饼图位置和大小
    const radius = Math.min(width, height) * 0.28; // 减小半径，留更多空间给图例
    const centerX = width / 2;
    const centerY = height / 2 - 20; // 将饼图位置上移，给底部图例留空间
    
    // 绘制标题
    ctx.setFontSize(14);
    ctx.setTextAlign('center');
    ctx.setTextBaseline('top');
    ctx.fillText(title, centerX, 10);
    
    // 绘制饼图
    let startAngle = 0;
    const colorMap = {};
    colorConfig.forEach(item => {
      colorMap[item.name] = item.color;
    });
    
    // 记录每个扇形的信息，用于后续绘制图例
    const segmentInfos = [];
    
    // 先绘制扇形
    Object.entries(data).forEach(([level, count]) => {
      if (count === 0) return;
      
      // 计算扇形角度和百分比
      const angle = (count / total) * 2 * Math.PI;
      const endAngle = startAngle + angle;
      const percent = Math.round((count / total) * 100);
      
      // 记录扇形信息，用于后续绘制图例
      segmentInfos.push({
        level,
        count,
        percent,
        color: colorMap[level] || '#CCCCCC'
      });
      
      // 绘制扇形
      ctx.beginPath();
      ctx.moveTo(centerX, centerY);
      ctx.arc(centerX, centerY, radius, startAngle, endAngle);
      ctx.setFillStyle(colorMap[level] || '#CCCCCC');
      ctx.fill();
      
      startAngle = endAngle;
    });
    
    // 绘制图例 - 重新设计图例布局，确保可见
    const legendStartY = centerY + radius + 20; // 图例起始Y坐标，位于饼图下方
    
    // 一行显示两个图例项
    let currentX = 30; // 起始X位置
    let currentY = legendStartY;
    const maxWidth = width - 60; // 最大宽度
    const itemHeight = 20; // 图例项高度
    
    // 先添加有数据的图例
    segmentInfos.forEach((segment, index) => {
      // 如果当前行放不下，换到下一行
      if (index > 0 && index % 2 === 0) {
        currentX = 30;
        currentY += itemHeight;
      }
      
      // 绘制颜色方块
      ctx.setFillStyle(segment.color);
      ctx.fillRect(currentX, currentY, 12, 12);
      
      // 绘制文本
      ctx.setFontSize(11);
      ctx.setTextAlign('left');
      ctx.setFillStyle('#000000');
      ctx.fillText(`${segment.level}: ${segment.percent}%`, currentX + 16, currentY + 10);
      
      // 移动到下一个位置
      currentX += (width - 60) / 2;
    });
    
    // 添加没有数据的图例（灰色显示）
    Object.entries(colorMap).forEach(([level, color]) => {
      // 如果该级别已经在有数据的图例中，则跳过
      if (segmentInfos.some(seg => seg.level === level)) return;
      
      // 如果当前行放不下，换到下一行
      if (currentX > width - 100) {
        currentX = 30;
        currentY += itemHeight;
      }
      
      // 绘制灰色方块
      ctx.setFillStyle('#DDDDDD');
      ctx.fillRect(currentX, currentY, 12, 12);
      
      // 绘制文本
      ctx.setFontSize(11);
      ctx.setTextAlign('left');
      ctx.setFillStyle('#999999');
      ctx.fillText(`${level}: 0%`, currentX + 16, currentY + 10);
      
      // 移动到下一个位置
      currentX += (width - 60) / 2;
    });
    
    ctx.draw(); // 执行绘制
  }
}); 